<template>
  <div class="header" :class="{'fix-header': isFixed}">
    <!-- logo -->
    <div class="logo">
      <!-- src用不了三元表达式 -->
      <router-link to="/home">
        <img v-if="!isFixed" src="~assets/img/logo.png" alt="海洋启明星"/>
        <img v-else src="~assets/img/fix-logo.png" alt="海洋启明星">
      </router-link>
    </div>
    <!-- 菜单 -->
    <Nav/>
    <!-- 搜索 -->
    <Search/>
    <!-- 登录/注册 -->
    <template v-if="showLogin">
      <!-- 未登录 -->
      <div v-if="!isLogin" class="login">
        <router-link to="/loginView/login" @click.native="showLogin = false">登 录</router-link>
        <router-link to="/loginView/register" @click.native="showLogin = false">注 册</router-link>
      </div>
      <!-- 已登录 用户头像 -->
      <div v-else class="avator" @mouseover="showProfile = true" @mouseout="showProfile = false">
        <img src="~assets/img/avator.jpg" alt="">
        <!-- 个人菜单 -->
        <div class="menu" v-show="showProfile" @mouseover="showProfile = true">
          <ul>
            <router-link to="/profile/content" tag="li"><i class="icon el-icon-user"> </i> 主 页</router-link>
            <router-link to="/profile/setting" tag="li"><i class="icon el-icon-setting"> </i> 设 置</router-link>
          </ul>
          <a href="javascript:;" class="logout">退 出 登 录</a>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
  import Search from 'components/common/search/Search'
  import Nav from 'components/Nav'
  export default {
    name: 'Header',
    components: {
      Search,
      Nav
    },
    data() {
      return {
        isFixed: false,   // 判断导航条是否需要固定
        showLogin: true,  // 判断是否显示登录注册
        isLogin: true,    // 判断用户是否登录
        showProfile: false,  // 判断是否显示个人菜单
      }
    },
    methods: {
      // 何时使导航条固定在顶部
      showFixHeader() {
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
        if (scrollTop > 400) {
          this.isFixed = true
        } else {
          this.isFixed = false
        }
      },

      // 更改showLogin，决定是否显示登录注册按钮
      changeShowLogin(data) {
        this.showLogin = data
      }
    },
    watch: {
      isFixed(val) {
        // 事件总线，传递isFixed
        this.$bus.$emit('getIsFixed', val)
      }
    },
    mounted() {
      // 监听滚动事件
      window.addEventListener('scroll', this.showFixHeader)

      // 绑定事件总线，接收参数，判断是否显示登录注册按钮
      this.$bus.$on('changeShowLogin', this.changeShowLogin)
    },
    beforeDestroy() {
      // 销毁前，解除事件总线
      this.$bus.$off('changeShowLogin')
    }
  }
</script>

<style scoped>
  @import "~assets/font/iconfont.css";

  .header {
    position: absolute;
    top: 10px;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    /* position: fixed;
    top: 0;
    left: 0;
    right: 0; */
    width: 100%;
    height: 100px;
    color: #fff;
    font-weight: 700;
  }

  .fix-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    color: #000;
    box-shadow: 2px 15px 50px #ddd;
    z-index: 1;
  }

  .fix-header .login a {
    color: #000
  }

  .fix-header .login a:last-child {
    color: #fff;
    background-color: #000;
    border-color: #000;
  }

  .fix-header .login a:last-child:hover {
    color: #000;
    background-color: #fff;
  }

  .logo {
    margin-left: 50px;
  }

  .logo img {
    height: 100px;
  }
  
  .login a {
    color: #fff;
    margin: 0 15px;
    /* 过渡 */
    transition: all .5s ease;
  }

  .login a:last-child {
    display: inline-block;
    height: 40px;
    line-height: 36px;
    background-color: #fff;
    border-radius: 40px;
    border: 2px solid #fff;
    color: #000;
    padding: 0 30px;
  }

  .login a:first-child:hover {
    color: #86a3b1;
  }

  .login a:last-child:hover {
    background-color: transparent;
    color: #fff;
  }

  .avator {
    height: 80px;
    line-height: 75px;
  }

  .avator img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #86a3b1;
    margin-right: 80px;
    cursor: default;
  }

  .menu {
    position: absolute;
    top: 90px;
    right: 95px;
    width: 170px;
    height: 190px;
    background: #fff;
    border-radius: 10px;
    color: #000;
    font-weight: 700;
    text-align: center;
  }

  .menu ul {
    padding: 20px 20px;
  }

  .menu li {
    width: 130px;
    height: 50px;
    line-height: 50px;
    border-radius: 5px;
    cursor: pointer;
  }

  .menu li .icon {
    font-size: 18px;
    font-weight: 700;
    margin-right: 5px;
  }

  .menu li:hover {
    background-color: #E2E5FF;
  }

  .menu li:hover {
    color: #86a3b1;
  }

  .menu li:hover .icon {
    color: #86a3b1;
  }

  .menu .logout {
    display: block;
    width: 100%;
    line-height: 50px;
    border-top: 1px solid #D9D9D9;
    color: #B8B8B8;
    font-size: 14px;
    font-weight: 400;
  }

  .menu .logout:hover {
    color: #FF0F3A;
    background-color: transparent;
  }
</style>